<template>
  <view class="pages">
    <view class="content">
      <checkbox-group @change="checkboxChange">
        <view
          class="content-item"
          v-for="(item, index) in addressList"
          :key="index"
          @click="checkAddress(item)"
        >
          <checkbox
            :value="item"
            :checked="cheakList.some((i) => i.id === item.id)"
            style="transform: scale(0.8)"
          />
          <view class="content-left">
            <view class="content-name">{{ item.participantsName }}</view>
            <view class="content-box">
              <text class="content-text">身份证</text>
              <text class="content-idcard">{{ item.participantsIdCard }}</text>
            </view>
            <view class="content-box">
              <text class="content-text">手机号</text>
              <text class="content-idcard">{{ item.participantsMobile }}</text>
            </view>
          </view>
          <view class="" @click.stop="del(item)">
            <uni-icons type="trash" size="25" color="#a1a1a1"></uni-icons>
          </view>
        </view>
      </checkbox-group>
    </view>
    <!-- 报名-->
    <view class="submitBox">
      <view
        v-if="cheakList.length == 0"
        class="submitBtn"
        @click="addAddress()"
      >
        添加新参与人
      </view>
      <view
        v-if="cheakList.length != 0"
        class="submitBtn"
        @click="confirmCheak()"
      >
        确认选择
      </view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      source: 0,
      defaults: {},
      addressList: [],
      cheakList: [],
    };
  },
  onShow() {
    this.getData();
  },
  onLoad(option) {
    this.source = option.source;
    this.cheakList = JSON.parse(option.data);
    console.log(this.cheakList);
  },
  methods: {
    getData() {
      uni.app.post(
        "/activity/personnel/list",
        { limit: 100, offset: 1, userId: uni.getStorageSync("userId") },
        "json",
        "",
        (res) => {
          this.addressList = res.data.rows;
        },
      );
    },
    del(item) {
      let that = this;
      uni.showModal({
        content: "确定删除此收获地址",
        success: function (res) {
          if (res.confirm) {
            uni.app.post(
              "/activity/personnel/delete",
              { id: item.id, userId: uni.getStorageSync("userId") },
              "json",
              "",
              (res) => {
                that.getData();
              },
            );
          }
        },
      });
    },
    checkboxChange(e) {
      this.cheakList = e.detail.value;
    },
    confirmCheak() {
      let pages = getCurrentPages();
      let prePage = pages[pages.length - 2];
      prePage.cheakList = this.cheakList;
      uni.navigateBack();
    },
    //选择地址
    checkAddress(item) {
      uni.navigateTo({
        url: `/pages/hotspot/staff?type=edit&data=${JSON.stringify(item)}`,
      });
    },
    addAddress() {
      uni.navigateTo({ url: `/pages/hotspot/staff?type=add` });
    },
    //添加或修改成功之后回调
    refreshList(data, type) {
      //添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
      this.addressList.unshift(data);
      console.log(data, type);
    },
  },
};
</script>

<style lang="scss">
.content {
  border-radius: 16rpx;
  width: 95vw;
  margin: 40rpx auto;
  background: #ffffff;
  padding: 30rpx;

  .content-item {
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #f8f8f8;
    padding: 10rpx 0;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .content-left {
      flex: 1;
      margin-left: 20rpx;

      .content-name {
        font-size: 28rpx;
      }

      .content-box {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        font-size: 24rpx;

        .content-text {
          margin-right: 16rpx;
          color: #303030;
        }

        .content-idcard {
          font-weight: bold;
        }
      }
    }
  }
}

.submitBox {
  width: 100%;
  background: #ffffff;
  padding: 16rpx 28rpx;
  position: fixed;
  bottom: 0;

  .submitBtn {
    width: calc(100vw - 56rpx);
    height: 56rpx;
    background: #d9f700;
    border-radius: 56rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #303030;
    line-height: 56rpx;
    text-align: center;
  }
}
</style>
